<template>
  <div class="list">
    <div v-for="(item,index) in list"
         :key="index">
      <div :class="[item.class]"></div>
      <div class="info">{{ item.info }}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: "ListView",
  props: {
    list: {
      type: Array,
      default() {
        return {}
      }
    }
  },
}
</script>

<style scoped>
.list{
  border-top: 10px solid #F2F2F2;
}
.list>div{
  display: flex;
  font-size: 16px;
  padding: 12px 12px 0 12px;
}
.list>div div:first-child{
  width: 20px;
  height: 20px;
}
.list>div div:last-child{
  flex: 1;
  margin-left: 10px;
  border-bottom: 1px solid #F2F2F2;
  padding-bottom: 10px;

}
/*公共样式*/
.cart{
  background: url("~assets/img/profile/cart.svg") no-repeat;
  background-size: cover;
}
.message{
  background: url("~assets/img/profile/message.svg") no-repeat;
  background-size: cover;
}
.pointer{
  background: url("~assets/img/profile/pointer.svg") no-repeat;
  background-size: cover;
}
.vip{
  background: url("~assets/img/profile/vip.svg") no-repeat;
  background-size: cover;
}
.shopping {
  background: url("~assets/img/profile/shopping.svg") no-repeat;
  background-size: cover;
}
</style>
